@mixin zoom-animation(
  $direction: 'top',
  $scaleStart: scaleY(0),
  $scaleEnd: scaleY(1),
  $origin: center top
) {
  .zoom-in-#{$direction}-enter {
    transform: $scaleStart;
    opacity: 0;
  }

  .zoom-in-#{$direction}-enter-active {
    transform: $scaleEnd;
    transform-origin: $origin;
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  }

  .zoom-in-#{$direction}-exit {
    opacity: 1;
  }

  .zoom-in-#{$direction}-exit-active {
    transform: $scaleStart;
    transform-origin: $origin;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  }
}
@mixin scale-animation(
  $direction: 'center',
  $scaleStart: scale(0),
  $scaleEnd: scale(1),
  $origin: center center
) {
  .scale-in-#{$direction}-enter {
    transform-origin: $origin;
    transform: $scaleStart;
  }

  .scale-in-#{$direction}-enter-active {
    transform: $scaleEnd;
    transform-origin: $origin;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  }

  .scale-in-#{$direction}-exit {
    transform: $scaleEnd;
  }

  .scale-in-#{$direction}-exit-active {
    transform: $scaleStart;
    transform-origin: $origin;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  }
}

@mixin border-right-radius($raduis) {
  border-top-right-radius: $raduis;
  border-bottom-right-radius: $raduis;
}

@mixin border-left-radius($raduis) {
  border-top-left-radius: $raduis;
  border-bottom-left-radius: $raduis;
}

@mixin border-width-zero($direction) {
  border-#{$direction}-width: 0;
}
